<template>
  <div class="position_image" style=" display: flex;flex-direction: row;justify-content: space-between;padding: 50px">
    <div style="display: flex;flex-direction: row;flex-wrap: wrap;justify-content: center;align-items: flex-start;width: 48%">
      <div v-for="temp in list1" :key="temp.id" style="width: 45%;margin: 10px;">
        <div class="card-style">
          <div>
            <div style="float: right; padding: 3px 0 ;display:flex;align-items:center " >
              <span>在线情况：</span>
              <el-button v-show="temp.is_online===1" size="medium" type="success"  circle></el-button>
              <el-button v-show="temp.is_online===0" size="medium" type="danger"  circle></el-button>
            </div>
          </div>
          <div >id：{{temp.user_id}}</div>
          <div >姓名：{{temp.nick_name}}</div>
        </div>
      </div>
    </div>

    <div style="display: flex;flex-direction: row;flex-wrap: wrap;justify-content: center;align-items: flex-start;width: 48%;height: 80%">
      <div v-for="temp in list2" :key="temp.user_id" style="width: 45%;margin: 10px">
        <div class="card-style">
          <div>
            <div style="float: right; padding: 3px 0;display:flex;align-items:center ">
              <span>在线情况：</span>
              <el-button v-show="temp.is_online===1" size="medium" type="success"  circle></el-button>
              <el-button v-show="temp.is_online===0" size="medium" type="danger"  circle></el-button>
            </div>
          </div>
          <div >id：{{temp.user_id}}</div>
          <div >姓名：{{temp.nick_name}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getDepartmentList} from "@/api/wlwsys/jintao/main";

export default {
  name: 'position',
  mounted() {

    this.timer = setInterval(() => {
      // 要执行的函数
      this.changeList()
    }, 60000)
  },
  data() {
    return {
      timer :'',
      color1_1: 'rgba(19, 206, 102, 0.8)',
      color1_2: 'rgba(255, 69, 0, 0.68)',
      list1:[],
      list2:[],
    }
  },
  created() {
    this.initMethode()
  },
  methods:{
    //动态刷新的方法
    changeList(){
      getDepartmentList().then(result => {
        this.list1=[]
        this.list2=[]
        for(var i=0;i<result.length;i++){
          if(i<=13) this.list1.push(result[i]);
          else this.list2.push(result[i]);
        }
      })
    },
    initMethode:function (){
      getDepartmentList().then(result => {
        for(var i=0;i<result.length;i++){
          if(i<=13) this.list1.push(result[i]);
          else this.list2.push(result[i]);
        }
      })
    },
  },

  beforeDestroy() {
    clearInterval(this.timer);
  }
};
</script>
<style>

.card-style{
  height: 120px;
  width: 250px;
  color: white;
  font-size: 20px;
  font-family: 楷体;
  border: 1px #5d5959 solid;
  border-radius: 20px;
  background-color: rgba(0,0,0, 0.4);
  box-shadow: rgba(0, 0, 0, 0.3) 2px 8px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(3px);
  margin: 10px 20px 10px 20px;
}

.position_image{
  background: url("../../../assets/images/position_backgroud.png") no-repeat;
  background-position: center;
  background-size: 100% 100%;
  /*min-height: 720px;*/
}


.div100{
  background: linear-gradient(to top right, rgb(238, 163, 175), rgb(37, 70, 84));
}



</style>


